<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one {
            width: 100%;
        }

        .left {
            margin: 15% 10%;
            /* float: left; */
        }

        .left div {
            font-size: 20px;
            margin-top: 50px;
        }

        .left img {
            width: 350px;
            height: 350px;
            border-radius: 50%;
        }

        .right {
            width: 0;
            height: 0;
            border-left: 240px solid transparent;
            border-right: 240px solid transparent;
            border-bottom: 500px solid #e5e5e5;
            /* margin-top: -750px; */
            margin-top: -50%;
            /* margin-right: 300px; */
            margin-right: 25%;
            float: right;
            clear: both;
        }

        .right div {
            font-size: 25px;
        }

        .right-1 {
            width: 200px;
            margin-top: 125px;
            margin-left: -50px;
            color: #259b24;
        }

        .right-1-1 {
            width: 156px;
            border-bottom: 2px solid #cfcfcf;
            margin-top: 16px;
            margin-left: -78px;
        }

        .right-2 {
            width: 200px;
            margin-top: 24px;
            margin-left: -60px;
            color: #259b24;
        }

        .right-1-2 {
            width: 243px;
            border-bottom: 2px solid #cfcfcf;
            margin-top: 23px;
            margin-left: -120px;
        }
        
        .right-3 {
            width: 200px;
            margin-top: 24px;
            margin-left: -78px;
            color: #259b24;
        }

        .right-1-3 {
            width: 329px;
            border-bottom: 2px solid #cfcfcf;
            margin-top: 30px;
            margin-left: -164px;
        }

        .right-4 {
            width: 200px;
            margin-top: 51px;
            margin-left: -90px;
            color: #259b24;
        }
        .wz {
            width: 300px;
            margin: -215px 777px
        }
        .an {
            width: 650px;
            height: 50px;
            clear: both;
            margin: 300px 350px;            
        }
        .an-1 {
            width: 220px;
            height: 50px;
            border: 1px solid #dddddd;
            text-align: center;
            line-height: 50px;
        }
        .an-2 {
            width: 220px;
            height: 50px;
            border: 1px solid #dddddd;
            text-align: center;
            line-height: 50px;
            float: right;
            margin-top: -52px;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="left">
            <img src="images/zhu.jpeg" alt="">
            <div>专吃小孩</div>
        </div>

        <div class="right">
            <div class="right-1">File-封印</div>
            <div class="right-1-1"></div>
            <div class="right-2">if-八戒诈骗</div>
            <div class="right-1-2"></div>
            <div class="right-3">循环-百败不懈</div>
            <div class="right-1-3"></div>
            <div class="right-4">变量-找到高老庄</div>
        </div>
        <div class="wz">
            本关用时 1 day <br>
            目前最短用时 2 小时 30 分钟 <br>
            目前排名 第200 <br>
            2018年 参与人数800 <br>
        </div>
        <div class="an">
            <div class="an-1">年级排名</div>
            <div class="an-2">班级</div>
        </div>
    </div>
</body>

</html>